<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<style type="text/css">
			article {
				width: 300px;
				height: 300px;
				border: 1px solid red;
			}
			
			div {
				width: 50px;
				height: 50px;
				background: #00d672;
				margin-left: 5px;
				margin-bottom: 5px;
				float: left;
				cursor: pointer;
			}
		</style>
	</head>

	<body>

		<article>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</article>

		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script src="../anime-master/lib/anime.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$('div').click(function() {
				var index = $(this).index();
				anime({
					targets: "div",
					scale: [{
							value: 0.5,
							easing: 'easeOutSine',
							duration: 300
						},
						{
							value: 1,
							easing: 'easeInOutQuad',
							duration: 1200
						}
					],
					delay: anime.stagger(200, {
						grid: [5, 5],
						from: index
					})
				})
			})

			//		anime({
			//			targets:['div'],
			//			translateX: 250,
			//			innerHTML: [0, 10000],
			//			round: 1,
			//			duration: 5000,
			//			easing: 'linear'
			//		})
		</script>
	</body>

</html>